<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加工具 - 1024导航后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .form-input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <aside class="w-64 bg-white shadow-sm flex-shrink-0 hidden md:block overflow-y-auto">
            <div class="p-4 border-b border-gray-100">
                <div class="text-primary text-xl font-bold">1024<span class="text-secondary">管理后台</span></div>
            </div>

            <nav class="p-4 space-y-1">
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                    <span>控制台</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-th-large w-5 text-center mr-3"></i>
                    <span>资源管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm sidebar-active rounded">
                    <i class="fa fa-wrench w-5 text-center mr-3"></i>
                    <span>工具管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-users w-5 text-center mr-3"></i>
                    <span>用户管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-comments w-5 text-center mr-3"></i>
                    <span>社区内容</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-line-chart w-5 text-center mr-3"></i>
                    <span>数据统计</span>
                </a>

                <div class="border-t border-gray-100 my-3"></div>

                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-cog w-5 text-center mr-3"></i>
                    <span>系统设置</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-question-circle w-5 text-center mr-3"></i>
                    <span>帮助中心</span>
                </a>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm z-10">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <button class="md:hidden text-gray-600 text-xl">
                        <i class="fa fa-bars"></i>
                    </button>

                    <div class="flex items-center space-x-4 ml-auto">
                        <div class="relative">
                            <button class="text-gray-600 hover:text-primary transition-colors">
                                <i class="fa fa-bell text-xl"></i>
                                <span
                                    class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
                            </button>
                        </div>

                        <div class="relative group">
                            <button
                                class="flex items-center space-x-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                                <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像"
                                    class="w-8 h-8 rounded-full object-cover">
                                <span class="hidden md:inline-block text-sm font-medium">管理员</span>
                                <i class="fa fa-angle-down text-gray-500"></i>
                            </button>
                            <div
                                class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden group-hover:block">
                                <a href="profile.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                                <a href="settings.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">账号设置</a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
                <div class="max-w-4xl mx-auto">
                    <!-- 页面标题 -->
                    <div class="mb-6">
                        <div class="flex items-center">
                            <a href="admin_tool_manager.html" class="text-gray-600 hover:text-primary mr-2">
                                <i class="fa fa-angle-left"></i>
                            </a>
                            <h1 class="text-2xl font-bold text-gray-800">添加新工具</h1>
                        </div>
                        <p class="text-gray-500 mt-1">填写工具信息并提交审核</p>
                    </div>

                    <!-- 添加工具表单 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                        <form>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="toolName" class="block text-sm font-medium text-gray-700 mb-1">工具名称
                                        <span class="text-danger">*</span></label>
                                    <input type="text" id="toolName" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="请输入工具名称">
                                </div>

                                <div>
                                    <label for="toolCategory" class="block text-sm font-medium text-gray-700 mb-1">工具分类
                                        <span class="text-danger">*</span></label>
                                    <select id="toolCategory" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md form-input-focus bg-white">
                                        <option value="">请选择分类</option>
                                        <option value="dev">开发工具</option>
                                        <option value="design">设计工具</option>
                                        <option value="productivity">生产力工具</option>
                                        <option value="education">教育工具</option>
                                        <option value="media">媒体工具</option>
                                        <option value="utilities">实用工具</option>
                                    </select>
                                </div>

                                <div>
                                    <label for="toolUrl" class="block text-sm font-medium text-gray-700 mb-1">工具链接 <span
                                            class="text-danger">*</span></label>
                                    <input type="url" id="toolUrl" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md form-input-focus"
                                        placeholder="https://">
                                    <p class="text-xs text-gray-500 mt-1">请输入工具的官方网址</p>
                                </div>

                                <div>
                                    <label for="toolIcon"
                                        class="block text-sm font-medium text-gray-700 mb-1">工具图标</label>
                                    <div class="flex items-center space-x-3">
                                        <input type="file" id="toolIcon" accept="image/*" class="hidden"
                                            onchange="previewIcon(event)">
                                        <label for="toolIcon"
                                            class="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50 cursor-pointer">
                                            <i class="fa fa-upload mr-1"></i> 上传图标
                                        </label>
                                        <div id="iconPreview" class="w-8 h-8 rounded-full bg-gray-100 hidden"></div>
                                    </div>
                                </div>

                                <div>
                                    <label for="toolColor"
                                        class="block text-sm font-medium text-gray-700 mb-1">图标颜色</label>
                                    <div class="flex items-center space-x-3">
                                        <input type="color" id="toolColor" value="#3B82F6"
                                            class="w-8 h-8 p-0 border-0 rounded-md cursor-pointer">
                                        <select id="presetColors"
                                            class="flex-1 px-4 py-2 border border-gray-300 rounded-md form-input-focus bg-white">
                                            <option value="#3B82F6">蓝色 (默认)</option>
                                            <option value="#10B981">绿色</option>
                                            <option value="#F59E0B">橙色</option>
                                            <option value="#EF4444">红色</option>
                                            <option value="#8B5CF6">紫色</option>
                                            <option value="#EC4899">粉色</option>
                                        </select>
                                    </div>
                                </div>

                                <div>
                                    <label for="toolFontIcon" class="block text-sm font-medium text-gray-700 mb-1">Font
                                        Awesome 图标</label>
                                    <div class="flex items-center">
                                        <input type="text" id="toolFontIcon"
                                            class="flex-1 px-4 py-2 border border-gray-300 rounded-md form-input-focus"
                                            placeholder="例如: fa-calculator">
                                        <span id="iconPreview" class="ml-3 text-xl text-primary">
                                            <i class="fa fa-wrench"></i>
                                        </span>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">可使用Font Awesome图标，优先于上传的图片</p>
                                </div>
                            </div>

                            <div class="mb-6">
                                <label for="toolDescription" class="block text-sm font-medium text-gray-700 mb-1">工具描述
                                    <span class="text-danger">*</span></label>
                                <textarea id="toolDescription" rows="4" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md form-input-focus"
                                    placeholder="请简要描述工具的功能和特点"></textarea>
                                <p class="text-xs text-gray-500 mt-1">建议在100-200字之间，清晰说明工具用途和优势</p>
                            </div>

                            <div class="mb-6">
                                <label class="block text-sm font-medium text-gray-700 mb-3">工具特性</label>
                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                                    <label
                                        class="flex items-center p-3 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                                        <span class="text-sm">免费使用</span>
                                    </label>
                                    <label
                                        class="flex items-center p-3 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                                        <span class="text-sm">无需注册</span>
                                    </label>
                                    <label
                                        class="flex items-center p-3 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                                        <span class="text-sm">支持中文</span>
                                    </label>
                                    <label
                                        class="flex items-center p-3 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                                        <span class="text-sm">无广告</span>
                                    </label>
                                    <label
                                        class="flex items-center p-3 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                                        <span class="text-sm">开源</span>
                                    </label>
                                    <label
                                        class="flex items-center p-3 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" class="rounded text-primary focus:ring-primary mr-2">
                                        <span class="text-sm">移动端适配</span>
                                    </label>
                                </div>
                            </div>

                            <div class="mb-6">
                                <label for="toolScreenshot" class="block text-sm font-medium text-gray-700 mb-1">工具截图
                                    (可选)</label>
                                <div
                                    class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-colors">
                                    <input type="file" id="toolScreenshot" accept="image/*" multiple class="hidden"
                                        onchange="previewScreenshots(event)">
                                    <label for="toolScreenshot" class="cursor-pointer">
                                        <div class="text-gray-500 mb-2">
                                            <i class="fa fa-cloud-upload text-3xl"></i>
                                        </div>
                                        <p class="text-sm text-gray-600">点击上传或拖拽图片到此处</p>
                                        <p class="text-xs text-gray-500 mt-1">支持JPG、PNG格式，最多上传5张</p>
                                    </label>
                                    <div id="screenshotPreview" class="mt-4 flex flex-wrap gap-2 hidden"></div>
                                </div>
                            </div>

                            <div class="mb-6">
                                <label for="toolStatus"
                                    class="block text-sm font-medium text-gray-700 mb-1">状态设置</label>
                                <select id="toolStatus"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md form-input-focus bg-white">
                                    <option value="pending">待审核</option>
                                    <option value="active" selected>直接启用</option>
                                    <option value="inactive">暂不启用</option>
                                </select>
                            </div>

                            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-100">
                                <button type="button"
                                    class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                                    取消
                                </button>
                                <button type="submit"
                                    class="px-6 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-save mr-1"></i> 保存工具
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏切换（移动端）
        document.querySelector('.md\\:hidden').addEventListener('click', () => {
            const sidebar = document.querySelector('aside');
            sidebar.classList.toggle('hidden');
            sidebar.classList.toggle('absolute');
            sidebar.classList.toggle('top-0');
            sidebar.classList.toggle('left-0');
            sidebar.classList.toggle('h-full');
            sidebar.classList.toggle('z-50');
        });

        // 图标颜色预设选择
        document.getElementById('presetColors').addEventListener('change', function () {
            document.getElementById('toolColor').value = this.value;
        });

        // 图标预览
        document.getElementById('toolFontIcon').addEventListener('input', function () {
            const preview = document.getElementById('iconPreview').querySelector('i');
            preview.className = `fa ${this.value}`;
        });

        // 图标上传预览
        function previewIcon(event) {
            const file = event.target.files[0];
            if (file) {
                const preview = document.getElementById('iconPreview');
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.style.backgroundImage = `url(${e.target.result})`;
                    preview.style.backgroundSize = 'cover';
                    preview.classList.remove('hidden');
                }

                reader.readAsDataURL(file);
            }
        }

        // 截图上传预览
        function previewScreenshots(event) {
            const files = event.target.files;
            if (files.length > 0) {
                const previewContainer = document.getElementById('screenshotPreview');
                previewContainer.classList.remove('hidden');
                previewContainer.innerHTML = '';

                for (let i = 0; i < files.length && i < 5; i++) {
                    const file = files[i];
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        const img = document.createElement('div');
                        img.className = 'w-20 h-20 rounded bg-gray-100 overflow-hidden';
                        img.style.backgroundImage = `url(${e.target.result})`;
                        img.style.backgroundSize = 'cover';
                        img.style.backgroundPosition = 'center';
                        previewContainer.appendChild(img);
                    }

                    reader.readAsDataURL(file);
                }
            }
        }
    </script>
</body>

</html>